<template>
  <div>
    <div>
				<img :src="src" alt="">
				<Avatar :src="src" :width="150" fit="fill"></Avatar>
		</div>
    <br>
    <input type="file" @change="upload_upyun" />
    <div class="upload">拖拽上传</div>
    <br>

		    <input type="text" v-model="crdir" /><Button color="blue" @click="yunpro">创建目录</Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src:'',
      crdir:'',
  
    };
  },
  //监听属性
  watch: {},
  //计算属性
  computed: {},
  mounted() {
    // 注册拖拽容器
    let upload = document.querySelector(".upload");
    //声明监听事件
    upload.addEventListener("dragenter", this.onDrag, false);
    upload.addEventListener("dragover", this.onDrag, false);
    upload.addEventListener("drop", this.onDrop, false);
  },
  //自定义方法
  methods: {

    //定义创建又拍云方法
    yunpro:function(){
        this.axios.get('http://127.0.0.1:8000/upyunpro/',{params:{crdir:this.crdir}}).then(res=>{
          if (res.data.code == 200){
            alert('目录创建成功')
          }else{
            alert('失败')
          }
        });
      

    },

    onDrag(e) {
      e.stopPropagation();
      e.preventDefault();
    },
    onDrop(e) {
      e.stopPropagation();
      e.preventDefault();
      //调用自定义上传方法
      this.upload_upyun(e.dataTransfer.files);
    },
    //上传又拍云
    upload_upyun: function(files) {
      //获取文件对象
      //let file = e.target.files[0];
      let file = files[0];

      //声明参数
      let param = new FormData();
      param.append("file", file);

      //声明头部信息
      const config = {
        headers: { "Content-Type": "multipart/form-data" }
      };

      this.axios.post("http://localhost:8000/upyun/", param, config).then(res=>{

          localStorage.setItem('filename', res.data.filename)
        
           let filename = res.data.filename
        //   this.filename = filename
          this.src = 'http://1907b.test.upcdn.net/' + filename;
        })
    }
  }
};
</script>

<style>
.upload {
  margin: 100px auto;
  width: 300px;
  height: 150px;
  border: 2px dashed #f00;
}
</style>